<%@page import="control.action.BaseAction"%>
<%@page import="model.TUser"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<%BaseAction.setBackUrl(request); %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    .userimg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    
    .userinfo p {
        padding: 15px;
        font-size: 12px;
    }
</style>

<body>

    <!-- 导航 -->
	<%@ include file="novelhead.jsp" %>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6 layui-col-md-offset3">
                <div class="layui-tab" lay-filter="demo" style="background-color:#F9F8F6">
                    <ul class="layui-tab-title">
                        <li class="layui-this">个人信息</li>
                        <li lay-id="222">充值</li>
                        <li lay-id="333">信息修改</li>
                    </ul>
                    <!-- 用户信息模块 -->
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row">
                                <div class="layui-col-md3">
                                    <img class="userimg" src="../upload/${myinfo.photourl}" alt="">
                                </div>
                                <div class="layui-col-md7 userinfo">
                                    <p>用户昵称：${myinfo.nickname}</p>
                                    <P>用户账号:${myinfo.userid}</P>
                                </div>
                            </div>
                            <div class="layui-row" style="margin-top:10px;">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <p><img src="img/money.ico" alt=""> 账户余额</p>
                                        <br>
                                        <p><strong style="font-size:20px">${myinfo.bookbean}</strong>&nbsp;书豆</p>
                                    </div>
                                    <div class="layui-card-foot">
                                        <!-- <a href="" class="site-test1-active" data-type="tabChange" style="margin-left:30px">充值</a> -->
                                        <button class="site-demo-active" data-type="tabChange" style="border:none;background-color: white;margin-left: 30px;">充值</button>
                                    </div>
                                </div>
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <p><img src="img/book.ico" alt="">我的书架</p>
                                        <br>
                                        <p><strong style="font-size:20px">${mybook}</strong>&nbsp;本藏书</p>
                                    </div>
                                    <div class="layui-card-foot">
                                        <a href="mybooksroom.action?userid=${loginuser.userid}" style="margin-left:20px">立即查看</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 充值模块 -->
                        <div class="layui-tab-item">
                            <div class="layui-row">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-card">
                                            <div class="layui-card-header">充值方式</div>
                                            <div class="layui-car-body">
                                                <form action="addbookbean.action" class="layui-form" method="post">
                                                    <input type="hidden" name="mybookbean" value="${myinfo.bookbean}">
                                                    <input type="hidden" name="userid" value="${loginuser.userid}">
                                                    <div class="layui-from-item">
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="payfor" value="微信" title="<img src='img/wechat.ico'>&nbsp;微信">
                                                            <input type="checkbox" name="payfor" value="支付宝" title="<img src='img/pay.ico'>&nbsp;支付宝">
                                                            <input type="checkbox" name="payfor" value="QQ钱包" title="<img src='img/qq.ico'>&nbsp;QQ钱包">
                                                        </div>
                                                    </div><br>
                                                    <div class="layui-form-item">
                                                        <label>&nbsp;&nbsp;&nbsp;&nbsp;充值金额</label><br>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="paymoney" value="5" title="￥5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（500书豆）">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="paymoney" value="10" title="￥10&nbsp;&nbsp;&nbsp;&nbsp;（1000书豆）">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="paymoney" value="20" title="￥20&nbsp;&nbsp;&nbsp;&nbsp;（2000书豆）">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="paymoney" value="50" title="￥50&nbsp;&nbsp;&nbsp;&nbsp;（5000书豆）">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="checkbox" name="paymoney" value="100" title="￥100（10000书豆）">
                                                        </div>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="paymoney" value="" id="jin" placeholder="其他金额" class="layui-input">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <button class="layui-btn" lay-submit lay-filter="formDemo" id="btn">立即支付</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    	<!-- 信息修改模块 -->
                    	<div class="layui-tab-item">
                            <div class="layui-row">
                                <form action="changeinfo.action" class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户账号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="userid" required lay-verify="required" readonly="true" autocomplete="off" class="layui-input" value="${myinfo.userid}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户昵称:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="nickname" required lay-verify="required" autocomplete="off" class="layui-input" value="${myinfo.nickname}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">旧密码:</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="oldpwd" required lay-verify="required" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">新密码:</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="newpwd" required lay-verify="required" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认更改</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@ include file="foot.jsp" %>
</body>
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    layui.use('element', function() {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabChange: function() {
                //切换到指定Tab项
                element.tabChange('demo', '222'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function() {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
    //表单
    layui.use('form', function() {
        var form = layui.form,
            $ = layui.jquery;
        //复选框变单选框
        form.on('checkbox', function(data) {
            if (data.elem.checked) {
                $('input[name=paymoney]').prop('checked', false);
                $(data.elem).prop('checked', true);
            } else {
                $('input[name=payfor]').prop('checked', false);
                $(data.elem).prop('checked', true);
            }
            form.render('checkbox');
        });
    });
    $("#btn").click(function(){
    	alert($("#jin").text());
    	var x  = $("#jin").text();
    	//ajax传值
	    $.ajax({
	    	type:"post",
	    	url:addbookbean.action,
	    	data:{
	    		bookbean:${myinfo.bookbean},
	    		paymoney:x,
	    		userid:${loginuser.userid},
	    		op:"chognzhi"
	    	},
	    	datatype:'text',
	    	success: function (result) {
            	alert("充值成功");
            },
            error: function (xhr, status, p3, p4) {
            	var err = "Error " + " " + status + " " + p3;
           		if (xhr.responseText && xhr.responseText[0] == "{")
                	err = JSON.parse(xhr.responseText).message;
                    alert(err);
         	}
	    })
    })
</script>

</html>